<template>
  <el-card
    class="box-card"
    style="background-color: #fff; margin-left: 1%; width: 98%"
  >
    <div style="display: flex; flex-wrap: wrap">
      <div style="margin-right: 20px">
        <span>订单号</span>
        <el-input
          class="input"
          placeholder="订单号"
          v-model="orderNumber"
          clearable
        >
        </el-input>
      </div>

      <div style="margin-right: 20px">
        <span>收货人</span>
        <el-input
          class="input"
          placeholder="收货人"
          v-model="consignee"
          clearable
        >
        </el-input>
      </div>
      <div style="margin-right: 20px">
        <span>手机号</span>
        <el-input class="input" placeholder="手机号" v-model="tel" clearable>
        </el-input>
      </div>

      <div style="margin-right: 20px; margin-top: 20px">
        <span>订单状态</span>
        <el-select v-model="orderState" clearable placeholder="请选择">
          <el-option value="已完成">已完成</el-option>
          <el-option value="已受理">已受理</el-option>
          <el-option value="派送中">派送中</el-option>
        </el-select>
      </div>

      <div style="margin-right: 20px; margin-top: 20px">
        <span>选择时间</span>
        <el-date-picker
          v-model="time"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        >
        </el-date-picker>
      </div>
      <el-button
        @click="clickSelect"
        style="margin-top: 20px"
        size="medium"
        type="primary"
        >查询</el-button
      >
    </div>

    <!-- 表格 -->
    <el-table :data="list" border style="width: 100%; margin-top: 60px">
      <el-table-column fixed label="订单号" width="80">
        <template slot-scope="obj">
          <el-input
            v-if="obj.row.showEdit"
            v-model="obj.row.orderNo"
          ></el-input>
          <span v-else>{{ obj.row.orderNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="下单时间" width="150">
        <template slot-scope="obj">
          <el-input
            v-if="obj.row.showEdit"
            v-model="obj.row.orderTime"
          ></el-input>
          <span v-else>{{ obj.row.orderTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" width="120">
        <template slot-scope="obj">
          <el-input v-if="obj.row.showEdit" v-model="obj.row.phone"></el-input>
          <span v-else>{{ obj.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收货人" width="120">
        <template slot-scope="obj">
          <el-input
            v-if="obj.row.showEdit"
            v-model="obj.row.consignee"
          ></el-input>
          <span v-else>{{ obj.row.consignee }}</span>
        </template>
      </el-table-column>
      <el-table-column label="配送地址" width="100">
        <template slot-scope="obj">
          <el-input
            v-if="obj.row.showEdit"
            v-model="obj.row.deliverAddress"
          ></el-input>
          <span v-else>{{ obj.row.deliverAddress }}</span>
        </template>
      </el-table-column>
      <el-table-column label="送达时间" width="150">
        <template slot-scope="obj">
          <el-input
            v-if="obj.row.showEdit"
            v-model="obj.row.deliveryTime"
          ></el-input>
          <span v-else>{{ obj.row.deliveryTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户备注" width="100">
        <template slot-scope="obj">
          <el-input
            v-if="obj.row.showEdit"
            v-model="obj.row.remarks"
          ></el-input>
          <span v-else>{{ obj.row.remarks }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单金额" width="120">
        <template slot-scope="obj">
          <el-input
            v-if="obj.row.showEdit"
            v-model="obj.row.orderAmount"
          ></el-input>
          <span v-else>{{ obj.row.orderAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" width="120">
        <template slot-scope="obj">
          <el-input
            v-if="obj.row.showEdit"
            v-model="obj.row.orderState"
          ></el-input>
          <span v-else>{{ obj.row.orderState }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="obj">
          <el-button @click="examine(obj.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button
            v-if="obj.row.showEdit"
            @click="ensure(obj.row)"
            type="text"
            size="small"
            >完成</el-button
          >
          <el-button @click="celledit(obj.row)" v-else type="text" size="small"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 翻页 -->
    <el-pagination
      style="height: 50px; padding-top: 30px"
      @size-change="sizeChange"
      @current-change="curChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="48"
    >
    </el-pagination>

    <!-- 查看蒙层 -->
    <div v-show="isshow" class="mask">
      <div class="mask-card">
        <div style="display: flex; justify-content: space-between">
          <p>收货人:{{ name }}</p>
          <i
            @click="clickBack"
            style="font-size: 30px"
            class="el-icon-circle-close"
          ></i>
        </div>
        <p>电话号码:{{ phone }}</p>
        <p>订单号:{{ orderNo }}</p>
        <p>订单金额:{{ price }}</p>
        <p>配送地址:{{ deliverAddress }}</p>
        <p>下单时间:{{ orderTime }}</p>
        <p>送达时间:{{ deliveryTime }}</p>
        <p>订单状态:{{ oState }}</p>
        <p>备注:{{ remarks }}</p>
      </div>
    </div>
  </el-card>
</template>

<script>
import { orderList, detail, edit } from "@/apis/order";
import { getChinaTime } from "@/utils/utils";

export default {
  data() {
    return {
      isshow: false,
      currentPage: 1,
      pagesize: 5,
      list: [],
      total: 0,

      //查看
      orderNo: "", //订单号
      name: "",
      deliverAddress: "", //配送地址
      deliveryTime: "", //送达时间
      orderTime: "", //下单时间
      price: "", //订单金额
      remarks: "", //备注
      phone: "", //电话号码
      oState: "", //订单状态

      //查询
      orderNumber: "", //订单号
      consignee: "", //收货人
      tel: "", //手机
      //下拉--订单状态
      orderState: "",
      //时间
      time: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  created() {
    this.reqtableData();
  },
  methods: {
    reqtableData() {
      orderList({
        currentPage: this.currentPage,
        pageSize: this.pagesize,
        orderNo: this.orderNumber,
        consignee: this.consignee,
        phone: this.tel,
        orderState: this.orderState,
        date: this.time,
      }).then((res) => {
        // console.log(res);
        for (let obj of res.data.data) {
          obj.orderTime = getChinaTime(obj.orderTime);
          obj.deliveryTime = getChinaTime(obj.deliveryTime);
          obj.showEdit = false;
        }
        this.list = res.data.data;
        this.total = res.data.total;
      });
    },

    sizeChange(val) {
      this.pagesize = val;
      this.reqtableData();
    },
    curChange(val) {
      this.currentPage = val;
      this.reqtableData();
    },

    //查询
    clickSelect() {
      this.reqtableData();
    },

    //查看
    examine(row) {
      this.isshow = true;
      detail(row).then((res) => {
        let ret = res.data.data;
        // console.log(ret);
        this.name = ret.consignee;
        this.orderNo = ret.orderNo;
        this.deliverAddress = ret.deliverAddress;
        this.deliveryTime = getChinaTime(ret.deliveryTime);
        this.orderTime = getChinaTime(ret.orderTime);
        this.phone = ret.phone;
        this.remarks = ret.remarks;
        this.oState = ret.orderState;
        this.price = ret.orderAmount;
      });
    },

    //返回
    clickBack() {
      this.isshow = false;
    },

    //编辑
    celledit(row) {
      row.showEdit = true;
    },

    //完成
    ensure(row) {
      row.showEdit = false;
      edit(row).then((res) => {
        if (res.data.code === 0) {
          this.$message({
            message: res.data.msg,
            type: "success",
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.input {
  width: 200px;
}
span {
  margin-right: 15px;
}
.mask {
  z-index: 100;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(120, 121, 123, 0.8);
  .mask-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 350px;
    padding: 20px;
    background-color: #fff;
    p {
      margin-bottom: 15px;
    }
  }
}
</style>